<template>
  <div class="action-bar">
    <div class="left-actions">
      <a-space>
        <template v-for="(action, index) in leftActions" :key="index">
          <a-button
            v-if="checkActionPermission(action) && shouldShowAction(action)"
            v-bind="getButtonProps(action)"
            @click="() => handleAction(action)"
          >
            <template v-if="action.icon" #icon>
              <component :is="action.icon" />
            </template>
            {{ action.label }}
          </a-button>
        </template>
      </a-space>
    </div>
    <div class="right-actions">
      <a-space>
        <template v-for="(action, index) in rightActions" :key="index">
          <a-button
            v-if="checkActionPermission(action) && shouldShowAction(action)"
            v-bind="getButtonProps(action)"
            @click="() => handleAction(action)"
          >
            <template v-if="action.icon" #icon>
              <component :is="action.icon" />
            </template>
            {{ action.label }}
          </a-button>
        </template>

        <a-dropdown v-if="moreActions.length">
          <template #overlay>
            <a-menu>
              <a-menu-item
                v-for="(action, index) in moreActions"
                :key="index"
                @click="() => handleAction(action)"
              >
                <template v-if="action.icon">
                  <component :is="action.icon" />
                </template>
                {{ action.label }}
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>
            更多操作
            <DownOutlined />
          </a-button>
        </a-dropdown>
      </a-space>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';

/**
 * 操作按钮栏组件
 */
const props = defineProps({
  /** 操作按钮配置 */
  actions: {
    type: Array,
    default: () => []
  },
  /** 选中行的键值 */
  selectedRowKeys: {
    type: Array,
    default: () => []
  },
  /** 选中的行数据 */
  selectedRows: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['action']);

// 根据position拆分操作按钮
const leftActions = computed(() => {
  return props.actions.filter(action => !action.position || action.position === 'left');
});

const rightActions = computed(() => {
  return props.actions.filter(action => action.position === 'right' && !action.more);
});

const moreActions = computed(() => {
  return props.actions.filter(action => action.more);
});

// 检查操作按钮权限
const checkActionPermission = (action) => {
  if (!action.permission) return true;
  
  // 这里可以接入项目的权限控制系统
  // 示例: return checkPermission(action.permission);
  return true;
};

// 根据条件确定是否显示操作
const shouldShowAction = (action) => {
  // 批量操作相关处理
  if (action.batchAction && props.selectedRowKeys.length === 0) {
    return false;
  }
  
  // 单项操作相关处理
  if (action.singleAction && props.selectedRowKeys.length !== 1) {
    return false;
  }
  
  // 自定义显示条件
  if (action.showCondition && typeof action.showCondition === 'function') {
    return action.showCondition(props.selectedRowKeys, props.selectedRows);
  }
  
  return true;
};

// 获取按钮属性
const getButtonProps = (action) => {
  const buttonProps = { ...(action.props || {}) };
  
  // 批量操作相关处理
  if (action.batchAction && props.selectedRowKeys.length === 0) {
    buttonProps.disabled = true;
  }
  
  // 单项操作相关处理
  if (action.singleAction && props.selectedRowKeys.length !== 1) {
    buttonProps.disabled = true;
  }
  
  // 危险操作相关处理
  if (action.danger) {
    buttonProps.danger = true;
  }
  
  return buttonProps;
};

// 处理操作按钮点击
const handleAction = (action) => {
  if (action.handler && typeof action.handler === 'function') {
    action.handler(props.selectedRowKeys, props.selectedRows);
  } else {
    emit('action', action, props.selectedRowKeys, props.selectedRows);
  }
};
</script>

<style scoped>
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 2px;
}

.left-actions {
  display: flex;
  align-items: center;
}

.right-actions {
  display: flex;
  align-items: center;
}
</style>
